10. 3D Websites

Let’s talk dimensions. Earlier, you saw that browsers use a coordinate system that looks different than what you used in math class.

This is a two-dimensional coordinate system. One dimension, x, is horizontal (↔︎) and the other, y, is vertical (↕︎).

Browsers render websites in three dimensions.

Browsers also have a third dimension: the z-dimension (also known as the z-axis). While x and y run along the computer screen's surface, z is the dimension that extends in to and out of the screen. By adding a third dimension, you can think of elements as appearing on different layers, similar to the kind of layers you would find in image-editing software like Adobe® Photoshop®.

In CSS you can often use the z-index property to control the stacking order of overlapping elements on different layers (but there are many gotchas!).

In the animation below, you'll see a website with elements that overlap. There is a normal flow block element in the top left (the grey element) and four position: absolute block elements (the colored elements) with z-index set. Don't worry about what position: absolute means yet. Just pay attention to how the z-index controls the way overlapping elements stack.

The first thing you saw was the "viewport," which is the visible portion of the website seen through the browser's window.

Elements on layers that are higher in the z-axis appear on top of elements beneath them. I'm going to add a user to the last diagram to show you why.

From the grumpy cat's perspective, elements that are higher on the z-axis are "closer." From its perspective, it makes sense that the blue element should appear above the others.

There are some nuances to layers that you'll need to handle when you start mixing and matching layers. Before you get there, I want to define more background terminology and then cover the last two flows of the lesson: fixed and absolute.